<template>
  <div class="modeldetail">
    <div>
      <el-button
        type="primary"
        @click="onConfirm('ruleForm')"
        :loading="loading"
        >保存</el-button
      >
    </div>
    <div class="modeldetail-two">
      <div class="modeldetail-weight">身份信息</div>
      <div>
        <el-form
          :inline="true"
          :model="form"
          label-position="top"
          :rules="rules"
          ref="ruleForm"
        >
          <div class="myelform">
            <el-form-item label="前/后台" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                @change="onChangType"
                :disabled="form.id"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份名称" prop="title">
              <el-input
                v-model="form.title"
                placeholder="请输入身份名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="身份标识" prop="identity">
              <el-input
                v-model="form.identity"
                placeholder="请输入身份标识"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="身份状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in optionsTwo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="身份排序（数字越大排序约靠前）"
              prop="listorder"
            >
              <el-input
                v-model="form.listorder"
                placeholder="身份排序（数字越大排序约靠前）"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div
      class="modeldetail-two"
      style="margin-top: 20px"
      v-if="modellist.length"
    >
      <div class="modeldetail-weight">身份权限</div>
      <div style="margin-top: 30px">
        <el-collapse>
          <el-collapse-item
            :title="item.name"
            :name="item.unique"
            v-for="(item, index) in modellist"
            :key="index"
          >
            <div
              class="identitycollapseitem"
              v-for="(e, idx) in item.list"
              :key="idx"
            >
              <el-checkbox
                v-model="e.istrue"
                @change="e.qx[0].istrue = e.istrue"
                >{{ e.name }}</el-checkbox
              >
              <div>
                <template v-for="(ex, indx) in e.qx">
                  <el-checkbox
                    v-model="ex.istrue"
                    @change="ex.rolekey == 'look' ? (e.istrue = ex.istrue) : ''"
                    :key="indx"
                    >{{ ex.rolename }}</el-checkbox
                  >
                </template>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import {
  postAdminUserEditrole,
  postAdminUserRolelook,
  postAdminUserPermission_list,
} from "@/api";
export default {
  data() {
    return {
      loading: false,
      form: {
        type: "",
        title: "",
        identity: "",
        status: "",
        listorder: "",
      },
      rules: {
        type: [
          { required: true, message: "请选择前/后台类型", trigger: "blur" },
        ],
        title: [{ required: true, message: "请输入身份名称", trigger: "blur" }],
        identity: [
          { required: true, message: "请输入身份标识", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        listorder: [
          { required: true, message: "请输入身份排序", trigger: "blur" },
        ],
      },
      options: this.$store.state.portlist,
      optionsTwo: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "禁用",
          value: "1",
        },
      ],
      modellist: [],
    };
  },
  async activated() {
    this.form = {
      type: "",
      title: "",
      identity: "",
      status: "",
      listorder: "",
    };
    this.modellist = []
    // await this.postAdminUserPermission_list();
    if (this.$route.query.id) {
      this.postAdminUserRolelook(this.$route.query.id);
    }
  },
  methods: {
    // type改变时
    onChangType(e) {
      console.log("e", e);
      this.postAdminUserPermission_list(e);
    },
    // 全部功能模块展示
    async postAdminUserPermission_list(type) {
      let obj = {
        type,
      };
      await postAdminUserPermission_list(obj).then((res) => {
        console.log("全部功能模块展示------------>", res);
        let data = res.data;
        data.forEach((element) => {
          element.list.forEach((e) => {
            e.istrue = false;
            e.qx.forEach((item) => {
              item.istrue = false;
            });
          });
        });
        this.modellist = data;
      });
    },
    // 详情
    async postAdminUserRolelook(id) {
      let obj = {
        id,
      };
      let qxlist;
      await postAdminUserRolelook(obj).then((res) => {
        let data = res.data;
        this.form = {
          id: data.id,
          type: data.type,
          title: data.title,
          status: data.status,
          listorder: data.listorder,
          identity: data.identity,
        };
        qxlist = data.qxlist;
      });
      await this.postAdminUserPermission_list(this.form.type);
      await this.onFiltJurisdiction(qxlist);
    },
    async onFiltJurisdiction(qxlist) {
      console.log("qxlist", qxlist);
      let modellist = this.modellist;
      modellist.forEach((element) => {
        qxlist.forEach((e) => {
          if (element.unique == e.unique) {
            console.log("element", element);
            console.log("e", e);
            element.list.forEach((element_t) => {
              console.log("element_t", element_t);
              e.list.forEach((e_t) => {
                console.log("e_t", e_t);
                if (element_t.unique == e_t.unique) {
                  element_t.istrue = true;
                  element_t.qx.forEach((element_t_s) => {
                    e_t.qx.forEach((e_t_s) => {
                      if (element_t_s.rolekey == e_t_s.rolekey) {
                        element_t_s.istrue = true;
                      }
                    });
                  });
                }
              });
            });
          }
        });
      });
      this.modellist = modellist;
      console.log("modellist", modellist);
    },
    onFilt() {
      console.log("modellist-------->", this.modellist);
      let { modellist, form } = this;
      let arr = [];
      modellist.forEach((element) => {
        let arrFilt = element.list.filter((ele) => ele.istrue);
        console.log("arrFilt", arrFilt);
        if (arrFilt.length) {
          let list = [];
          arrFilt.forEach((e) => {
            let qx = [];
            if (form.type != 1) {
              e.qx.forEach((item) => {
                if (item.istrue) {
                  qx.push({
                    id: item.id,
                    rolekey: item.rolekey, //操作标识
                    rolename: item.rolename, //操作标识
                  });
                }
              });
            } else {
              e.qx.forEach((item) => {
                qx.push({
                  id: item.id,
                  rolekey: item.rolekey, //操作标识
                  rolename: item.rolename, //操作标识
                });
              });
            }
            let obj = {
              id: e.id,
              unique: e.unique,
              name: e.name,
              qx,
            };
            console.log("obj--->", obj);
            list.push(obj);
          });
          let obj = {
            id: element.id,
            unique: element.unique,
            name: element.name,
            list,
          };
          arr.push(obj);
        }
      });
      return arr;
    },
    onConfirm(e) {
      let that = this;
      console.log(this.onFilt());
      that.loading = true;
      this.$refs[e].validate(async (valid) => {
        if (valid) {
          let qxlist = that.onFilt();
          if (!qxlist.length) {
            that.loading = false;
            that.$message.warning("请添加身份权限");
          } else {
            that.form.qxlist = qxlist;
            await postAdminUserEditrole(that.form).then((res) => {
              console.log("添加身份权限", res);
              that.$set(that.form, "id", res.data);
              that.$message.success("身份权限保存成功");
            });
            that.loading = false;
            that.$router.go(-1);
          }
        } else {
          that.loading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.identitycollapseitem:not(:nth-last-child(1)) {
  border-bottom: 1px solid #eee;
}
.identitycollapseitem {
  display: flex;
  justify-content: space-between;
  padding: 10px 50px;

  > div {
    display: flex;
  }
}

.myelform {
  display: flex;
  justify-content: space-between;
}
.modeldetail {
  margin-top: 10px;
  &-one {
    display: flex;
    justify-content: space-between;
    > div:nth-child(1) {
      font-weight: 800;
    }
  }
  &-two {
    padding: 20px;
    border-radius: 4px;
    background: #ffffff;
  }
  &-weight {
    font-size: 20px;
    font-weight: 800;
  }
}
</style>